<template>
  <el-form-item :label-width="item.labelWidth?item.labelWidth:'130px'" :label="item.title" :prop="rules?item.field:''">
    <span slot="label">{{item.title}}
      <el-tooltip v-if="item.info" :content="item.info" placement="top">
        <span class="fas fa-info-circle color"></span>
      </el-tooltip>
    </span>
    <!-- <el-input v-model="form[item.field]" :disabled="disabled"></el-input> -->
    <div class="user-tree-container">
      <el-tree
        :data="userTree"
        show-checkbox
        node-key="id"
        @check="checkChange"
        :default-checked-keys="checked"
        :props="defaultProps">
      </el-tree>
    </div>
  </el-form-item>
</template>

<script>
import { getUserTree, findUser } from '@/beneform4j/api/common';
export default {
  // name: 'text'
  props: ['item', 'form', 'rules', 'disabled', 'roleId', 'isUser'],
  data() {
    return {
      userTree: [],
      checked: [],
      defaultProps: {
        children: 'children',
        label: 'text'
      }
    };
  },
  mounted: function() {
    if (this.form && this.form[this.item.field]) {
      // 回显
      const arr = this.form[this.item.field].split(',');
      arr.forEach(v => {
        this.checked.push(v);
      });
    }

    if (this.item.isUser) {
      findUser().then(response => {
        if (response.success) {
          if (response.data) {
            this.userTree = response.data;
            this.dealTreeItem(this.userTree);
          }
        }
      });
    } else {
      getUserTree().then(response => {
        if (response.success) {
          if (response.data) {
            this.userTree = response.data;
            this.dealTreeItem(this.userTree);
          }
        }
      });
    }
  },
  methods: {
    dealTreeItem: function(children) {
      children.forEach(item => {
        if (item.isEmployee === '0') {
          item.disabled = true;
        }
        if (item.children && item.children.length > 0) {
          this.dealTreeItem(item.children);
        }
      });
    },
    checkChange(item, checkObj) {
      let userStr = '';
      checkObj.checkedNodes.forEach(v => {
        if (v.isEmployee === '1') {
          userStr += v.id + ',';
        }
      });
      this.form[this.item.field] = userStr;
    }
  }
};
</script>

<style>
.user-tree-container{
  margin-top: 4px;
}
</style>
